<template>
  <el-dialog
    :title="'常规项目收费'"
    center
    :close-on-click-modal="false"
    :visible.sync="visible"
    v-if="visible"
    width="900px"
    lock-scroll
  >
    <div style="overflow: hidden; height: 100%; padding-bottom: 18px">
      <el-table :data="fee.paymentBills" border>
        <el-table-column prop="itemName" label="收费项名称" align="center" />
        <el-table-column prop="beginTime" label="费用开始时间" align="center"/>
        <el-table-column prop="endTime" label="费用结束时间" align="center"/>
        <el-table-column prop="price" label="单价" align="center"/>
        <el-table-column prop="num" label="数量" align="center"/>
        <el-table-column prop="amt" label="应收金额" align="center"/>
      </el-table>
      <div style="margin-top: 5px">
        <el-form @submit.native.prevent size="medium" :style="'width:100%'" label-width="70px" label-position="left">
          <el-row :gutter="24" :style="'width:100%;'">
            <el-col :span="8">
              <el-form-item label="实际应收" prop="feeUser">
                <el-input
                  v-model="fee.totalAmount"
                  placeholder="请输入实际应收"
                  :disabled="true"
                >
                  <template slot="append">
                    元
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收款金额" prop="feeUser">
                <el-input
                  v-model="fee.receivableAmount"
                  placeholder="请输入收款金额"
                >
                  <template slot="append">
                    元
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
                  <el-form-item label="付款方式" prop="payType">
                    <el-select v-model="fee.payType" placeholder="请选择付款方式" clearable>
                      <el-option
                        v-for="dict in dict.type.fee_method_options"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" :style="'width:100%;'">
            <el-col :span="8">
              <el-form-item label="是否代扣" prop="yesNo">
                <el-select v-model="fee.yesNo" placeholder="是否代扣" clearable>
                  <el-option
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账户余额" v-if="fee.yesNo=='Y'">
                <el-input
                  v-model="fee.balance"
                  disabled
                  placeholder="请输入账户余额"
                >
                  <template slot="append">
                    元
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="代扣金额" prop="payType" v-if="fee.yesNo=='Y'">
                <el-input
                  v-model="fee.withholdAmount"
                  @change="computeMoney"
                  placeholder="请输入代扣金额"
                >
                  <template slot="append">
                    元
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
  </el-dialog>
</template>
<script>
import {addPayTradeOrder} from "@/api/pay/order";
import {getPayPrestoreAccountByUserOwnerId} from "@/api/pay/prestore";

export default {
  components: {},
  dicts: ['fee_method_options','sys_yes_no'],
  props: [],
  data() {
    return {
      fee: {
        totalAmount: 0, //当前订单总金额
        receivableAmount: 0, //当前订单实际收款金额
        paymentBills: [],//订单详情
        payType: undefined,//支付类型
        yesNo:"N", //是否使用预存款
        balance:0,//当前业主的账号余额
        withholdAmount:0//代扣金额
      },
      loading: false,
      visible: false,
      listLoading: true,
      houseId:"",
      ownerId:"",
      ownerName:""
    };
  },
  watch:{
    'fee.yesNo':function (val){
      this.fee.balance=0;
      this.fee.withholdAmount=0;
      if(val=="Y"){
        //根据业主ID查询业为的账户余额
        getPayPrestoreAccountByUserOwnerId(this.ownerId).then(res=>{
          this.fee.balance=res.data.amt;
          this.fee.withholdAmount=res.data.amt;
          this.computeMoney();
        }).catch(error=>{
          this.fee.yesNo="N";
        })
      }else{
        this.computeMoney();
      }
    }
  },
  methods: {
    //计算金额
    computeMoney(){
      if(this.fee.yesNo=='Y'){
        if(this.fee.receivableAmount<=this.fee.withholdAmount){
          //余额充足
          this.fee.withholdAmount= this.fee.receivableAmount;
          this.fee.receivableAmount=0;
        }else{
          this.fee.receivableAmount=this.fee.totalAmount-this.fee.withholdAmount;
        }
      }else{
        this.fee.balance=0;
        this.fee.withholdAmount=0;
        this.fee.receivableAmount=this.fee.totalAmount;
      }
    },
    //组件初始化
    init(payList,houseId,ownerId,ownerName) {
      this.fee.totalAmount=0;
      this.fee.receivableAmount=0;
      this.houseId=houseId;
      this.ownerId=ownerId;
      this.ownerName=ownerName;
      this.visible = true;
      this.fee.paymentBills = payList;
      this.fee.yesNo="N"
      this.fee.paymentBills.filter(item=>{
        this.fee.totalAmount+=item.amt;
      })
      this.fee.receivableAmount=this.fee.totalAmount;
    },
    handleSubmit() {
      this.$confirm('确认完成订单提交及付款操作吗?', '提示', {
        type: 'warning',
      }).then(() => {
        let data={
          payType:this.fee.payType,
          houseId:this.houseId,
          ownerId:this.ownerId,
          ownerName:this.ownerName,
          payOrders:this.fee.paymentBills,
          receivableAmount:this.fee.receivableAmount,
          yesNo: this.fee.yesNo,
          withholdAmount:this.fee.withholdAmount
        }
        console.log(data)
        addPayTradeOrder(data).then(res=>{
          this.$message.success("操作成功")
          this.$emit("select")
          this.visible=false;
        })
      }).catch(() => {

      });
    }
  }
};
</script>
